﻿@page "/Progress"

@using FluentUI.Demo.Shared.Pages.Progress.Examples

<PageTitle>@App.PageTitle("Progress")</PageTitle>

<h1>Progress</h1>

<p>
    <em>Progress</em> and <em>progress ring</em> are used to display the length of time a process will take or to visualize percentage value
    (referred to as a <strong>determinate</strong> state) and to represent an unspecified wait time (referred to as an <strong>indeterminate</strong>
    state). <em>Progress</em> components are typically visually represented by a circular or linear animation. When the <code>value</code> attribute
    is passed the state is <strong>determinate</strong>, otherwise it is <strong>indeterminate</strong>.
</p>

<p>
    For progress components which have a linear visual appearance, use <code>&lt;FluentProgress&gt;</code>. For progress implementations which are circular,
    use <code>&lt;FluentProgressRing&gt;</code>.
</p>

<p>
    <code>&lt;FluentProgress&gt;</code> wraps the <code>&lt;fluent-progress&gt;</code> element, a web component implementation of a progress bar leveraging the
    Fluent UI design system.
</p>

<h2 id="example">Examples</h2>

<DemoSection Title="Default" Component="@typeof(ProgressDefault)"></DemoSection>

<DemoSection Title="Stroke and Color" Component="@typeof(ProgressStrokeExample)"></DemoSection>

<DemoSection Title="Paused" Component="@typeof(ProgressPaused)"></DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentProgress)" />
